<template>
  <div class="app-container">
    <form-header />
    <el-form ref="form" :model="form" label-width="140px">
      <el-form-item label="标题">
        <el-input v-model="form.title" clearable />
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :auto-upload="false"
          :class="{hide:hideUpload}"
          :file-list="imgsList"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="小程序页面链接">
        <el-input v-model="form.appletPage" clearable />
      </el-form-item>
      <el-form-item label="app页面链接">
        <el-input v-model="form.appPage" clearable />
      </el-form-item>
      <el-form-item label="h5页面链接">
        <el-input v-model="form.h5Link" clearable />
      </el-form-item>
      <el-form-item label="显示范围">
        <el-radio v-model="form.showRange" label="1">全国</el-radio>
        <el-radio v-model="form.showRange" label="2">地区</el-radio>
      </el-form-item>
      <el-form-item v-show="form.showRange === '2'" label="省份名称集合">
        <el-button @click="showProvincesDialog">{{ form.provinces }}</el-button>
      </el-form-item>
      <el-form-item v-show="form.showRange === '2'" label="城市名称集合">
        <el-button @click="showCitysDialog">{{ form.citys }}</el-button>
      </el-form-item>
      <el-form-item label="广告类型">
        <el-select v-model="form.typeId" placeholder="请选择类型" class="filter-item" style="width: 140px">
          <el-option v-for="item in g.ad.adTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属页面">
        <el-select v-model="form.belongToPage" placeholder="请选择所属页面" class="filter-item" style="width: 180px">
          <el-option v-for="item in g.ad.adTypePage" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch v-model="form.enable" />
      </el-form-item>
      <el-form-item label="有效时间">
        <el-col :span="5">
          <el-date-picker v-model="form.beginTime" type="date" placeholder="选择开始日期" style="width: 100%;" />
        </el-col>
        <el-col class="line" :span="1" style="text-align:center;">-</el-col>
        <el-col :span="5">
          <el-date-picker v-model="form.endTime" type="date" placeholder="选择结束日期" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="请选择"
      :visible.sync="locationDialogVisible"
      width="30%"
      :before-close="locationDialogClose"
    >
      <el-checkbox v-model="locationCheckAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;" />
      <el-checkbox-group v-model="locationDataList" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="(item, i) in originLocationDataList" :key="i" :label="item.name" style="width:130px;">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="locationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitLocationDialog">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { adDetail, adEdit } from '@/api/ad'
const { province, city, area, town } = require('province-city-china/data')
export default {
  name: 'AdEdit',
  data() {
    return {
      form: {
        id: '',
        title: '',
        imgUrl: null,
        appletPage: '',
        appPage: '',
        h5Link: '',
        provinces: '请选择省份',
        citys: '请选择城市',
        typeId: '',
        belongToPage: '',
        showRange: '',
        enable: false,
        beginTime: null,
        endTime: null
      },
      imgsList: [],
      hideUpload: false,
      imgFile: null,

      dialogImageUrl: '',
      dialogVisible: false,

      locationCheckAll: false,
      isIndeterminate: false,
      showLocationType: '',
      locationDialogVisible: false,
      originLocationDataList: [],
      locationDataList: []
    }
  },
  created() {
    this.form.id = this.$route.params['id']
    this.refresh()
  },
  mounted() {
    console.log(province)
    console.log(city)
    console.log(area)
    console.log(town)
  },
  methods: {
    showProvincesDialog() {
      this.locationDialogVisible = true
      this.originLocationDataList = []
      this.locationDataList = []
      this.showLocationType = 'provinces'
      for (const item of province) {
        this.originLocationDataList.push(item)
      }
    },
    showCitysDialog() {
      this.locationDialogVisible = true
      this.originLocationDataList = []
      this.showLocationType = 'city'

      const list = []
      for (const item of province) {
        for (const i of this.locationDataList) {
          if (item.name === i) {
            list.push(item)
          }
        }
      }
      for (const item of city) {
        for (const i of list) {
          if (item.province === i.province) {
            this.originLocationDataList.push(item)
          }
        }
      }
      this.locationDataList = []
    },
    handleCheckAllChange(val) {
      console.log(val)
      if (val) {
        const list = []
        for (const item of this.originLocationDataList) {
          list.push(item.name)
        }
        console.log(list)
        this.locationDataList = list
      } else {
        this.locationDataList = []
      }
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.locationCheckAll = checkedCount === this.originLocationDataList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.originLocationDataList.length
    },
    submitLocationDialog() {
      this.locationDialogVisible = false
      if (this.showLocationType === 'provinces') {
        console.log(JSON.stringify(this.locationDataList))
        this.form.provinces = this.locationDataList.length === 0 ? '请选择省份' : this.locationDataList.join(',')
        this.form.citys = '请选择城市'
      } else if (this.showLocationType === 'city') {
        console.log(JSON.stringify(this.locationDataList))
        this.form.citys = this.locationDataList.length === 0 ? '请选择城市' : this.locationDataList.join(',')
      }
    },
    locationDialogClose(done) {
      done()
    },
    refresh() {
      adDetail({ id: this.form.id }).then(response => {
        const data = response.data
        this.form.title = data.title
        if (data.imgUrl !== null && data.imgUrl !== '') {
          this.imgsList = [
            { url: data.imgUrl }
          ]
          this.hideUpload = true
        }
        this.form.imgUrl = data.imgUrl
        this.form.appletPage = data.appletPage
        this.form.appPage = data.appPage
        this.form.h5Link = data.h5Link
        this.form.provinces = data.provinces === '' ? '请选择省份' : data.provinces
        this.form.citys = data.citys === '' ? '请选择城市' : data.citys
        this.form.typeId = data.typeId + ''
        this.form.belongToPage = data.belongToPage + ''
        this.form.showRange = data.showRange + ''
        this.form.enable = data.enable === 1
        this.form.showRange = data.showRange + ''
        this.form.beginTime = new Date(data.beginTime)
        this.form.endTime = new Date(data.endTime)
      })
    },
    submit() {
      if (this.form.beginTime === null) {
        this.$message({ message: '请选择开始时间', type: 'error' })
        return
      }
      if (this.form.endTime === null) {
        this.$message({ message: '请选择结束时间', type: 'error' })
        return
      }

      if (this.imgFile === null && this.form.imgUrl === null) {
        this.$message({ message: '请选择图片', type: 'error' })
        return
      }

      if (this.imgFile !== null) {
        this.uploadImgToOss(this.imgFile).then(response => {
          console.log('图片上传结果：' + JSON.stringify(response))
          this.form.imgUrl = response
          this.goToSubmit()
        })
      } else {
        this.goToSubmit()
      }
    },
    goToSubmit() {
      if (this.form.showRange === '1') {
        this.form.provinces = ''
        this.form.citys = ''
        this.form.regions = ''
        this.form.towns = ''
      }
      this.form.enable = this.form.enable ? 1 : 0
      this.form.beginTime = this.form.beginTime !== null ? this.form.beginTime.getTime() : this.form.beginTime
      this.form.endTime = this.form.endTime !== null ? this.form.endTime.getTime() : this.form.endTime
      adEdit(this.form).then(response => {
        console.log(response)
        this.$message({ message: '提交成功', type: 'success' })
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.push({ name: 'AdList' })
      })
    },
    handleRemove(file, fileList) {
      console.log('handleChange')
      console.log(file)
      this.hideUpload = false
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChange(file, fileList) {
      console.log('handleChange' + fileList.length)
      console.log(file)
      this.imgFile = fileList.length > 0 ? file : null
      this.hideUpload = fileList.length >= 1
    }
  }
}
</script>

<style lang="scss" scoped>
.hide /deep/.el-upload--picture-card {
	display: none;
}
</style>
